import React, { Component } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';

const { Description } = DescriptionList;
@connect(({ loading, saladetailUpdate }) => ({
  loading: loading.models.saladetailUpdate,
  detailList: saladetailUpdate.detailList,
}))
@Form.create()
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: null,
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  // 详情
  getDetail = () => {
    const { dispatch, location } = this.props;
    const { wageOrderInfoId, activeKey } = location.query;
    this.setState({
      activeKey,
    });
    dispatch({
      type: 'saladetailUpdate/getDetailMessage',
      payload: { wageOrderInfoId },
    });
  };

  render() {
    const { loading, detailList } = this.props;
    const { activeKey } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading} size="large">
          <Card title={<span style={{ fontWeight: 900 }}>基本信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="姓名">{detailList.empName || '--'}</Description>
                <Description term="证件号">{detailList.idCode || '--'}</Description>
                <Description term="客户">{detailList.custName || '--'}</Description>
                <Description term="签约方">{detailList.ordSndrName || '--'}</Description>
                <Description term="接单方">{detailList.ordRecvName || '--'}</Description>
                <Description term="所属客服">{detailList.primName || '--'}</Description>
                <Description term="操作时间">
                  {(detailList.operTime &&
                    moment(detailList.operTime).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card title={<span style={{ fontWeight: 900 }}>收入信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="收入年月">
                  {(detailList.busiYmDate && moment(detailList.busiYmDate).format('YYYY-MM')) ||
                    '--'}
                </Description>
                <Description term="收入类型">{detailList.incmTypeName || '--'}</Description>
                <Description term="收入金额">
                  {detailList.incmAmo === 0
                    ? 0
                    : (detailList.incmAmo && detailList.incmAmo) || '--'}
                </Description>
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="本期免税收入">
                    {(detailList.advAdjAmo && detailList.advAdjAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="养老个人">
                    {(detailList.pensAmo && detailList.pensAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="医疗个人">
                    {(detailList.medAmo && detailList.medAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="失业个人">
                    {(detailList.unempAmo && detailList.unempAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="公积金个人">
                    {(detailList.accuAmo && detailList.accuAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计子女教育支出">
                    {(detailList.acumChildEduPay && detailList.acumChildEduPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计继续教育支出">
                    {(detailList.acumCntnuEduPay && detailList.acumCntnuEduPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计住房贷款利息支出">
                    {(detailList.acumHousMortgPay && detailList.acumHousMortgPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计住房租金支出">
                    {(detailList.acumHousRentPay && detailList.acumHousRentPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="累计赡养老人支出">
                    {(detailList.acumSuptElderPay && detailList.acumSuptElderPay) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="企业（职业）年金">
                    {(detailList.firmAnnui && detailList.firmAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="商业健康保险">
                    {(detailList.comAnnui && detailList.comAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="税延养老保险">
                    {(detailList.defrPenAnnui && detailList.defrPenAnnui) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="其他抵扣">
                    {(detailList.otherDedu && detailList.otherDedu) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="准予扣除的捐赠额">
                    {(detailList.allowDdctblDon && detailList.allowDdctblDon) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="减免税额">
                    {(detailList.ddctblAmo && detailList.ddctblAmo) || '--'}
                  </Description>
                ) : null}
                <Description term="本月应缴税额">
                  {(detailList.taxblAmo && detailList.taxblAmo) || '--'}
                </Description>
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="税后扣款">
                    {(detailList.aftAdjAmo && detailList.aftAdjAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="补退税额（上月）">
                    {(detailList.agoRtnAmo && detailList.agoRtnAmo) || '--'}
                  </Description>
                ) : null}
                {detailList.incmType && detailList.incmType === 1 ? (
                  <Description term="补退税额（本月）">
                    {(detailList.nowRtnAmo && detailList.nowRtnAmo) || '--'}
                  </Description>
                ) : null}
                <Description term="实发工资">
                  {(detailList.realAmo && detailList.realAmo) || '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card title={<span style={{ fontWeight: 900 }}>其他信息</span>}>
            <Form>
              <DescriptionList>
                <Description term="发放地区">{detailList.wageCityName || '--'}</Description>
                <Description term="报税地区">{detailList.taxCityName || '--'}</Description>
                <Description term="发放日期">
                  {(detailList.wageDate && moment(detailList.wageDate).format('YYYY-MM-DD')) ||
                    '--'}
                </Description>
                {activeKey === '2' && detailList.wageReaSendData ? (
                  <Description term="实际发放日期">
                    {(detailList.wageReaSendData &&
                      moment(detailList.wageReaSendData).format('YYYY-MM-DD')) ||
                      '--'}
                  </Description>
                ) : null}
                {detailList.reaRsn ? (
                  <Description term="原因">{detailList.reaRsn || '--'}</Description>
                ) : null}
                <Description term="手机号码">{detailList.mobile || '--'}</Description>
                <Description term="银行账号">{detailList.bankCardId || '--'}</Description>
                <Description term="开户行">{detailList.accoHolderName || '--'}</Description>
                <Description term="省市信息">{detailList.provinceInfo || '--'}</Description>
                <Description term="备注">{detailList.remark || '--'}</Description>
              </DescriptionList>
            </Form>
          </Card>
          {/* 问题记录 */}
          {detailList.probDets && <ProRecording proRecording={detailList.probDets} />}
          <FooterToolbar style={{ width: '100%' }}>
            <Button style={{ marginRight: 10 }} onClick={() => router.goBack()}>
              返回
            </Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Detail;
